<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue生命周期</title>
    <script src="./lib/vue-2.6.12.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">
        <h3 id="h3">{{ msg }}</h3>
        <button @click="modify">修改</button>
    </div>
    <button id='delVue'>删除Vue</button>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '创建好了'
            },
            methods: {
                show() {
                    console.log('in show()')
                },
                modify() {
                    this.msg = '更新了'
                }
            },
            beforeCreate() { // 第一个：
                // 此时只有默认的生命周期和事件函数，data、methods 都还没有初始化
                console.log('in beforeCreate() ');
                // this.show(); // [Vue warn]: Error in beforeCreate hook: "TypeError: this.show is not a function"
            },
            created() { // 第二个：
                // data、methods 已经初始化准备好，可以使用了。
                console.log('in created()')
                this.show();
            },
            beforeMount() { //第三个：模板已经编译好（指令也已执行），但只在内存中的虚拟DOM中
                // 此时页面中的元素还没有被真正替换，只是之前写的模板字符串
                console.log('in beforeMount(): ');
                console.log(document.getElementById('h3').innerHTML);
            },
            mounted() { // 第四个：vue示例已经完全创建好！并更新到页面
                console.log('in mounted(): ');
                console.log(document.getElementById('h3').innerHTML);
            },
            beforeUpdate() {                
                console.log('in beforeUpdate(): ');
                console.log(this.msg + ',' + document.getElementById('h3').innerHTML);
            },
            updated() {
                console.log('in updated(): ');
                console.log(this.msg + ',' + document.getElementById('h3').innerHTML);
            }
        })

        document.getElementById('delVue').onclick = function(ev) {
            vm = null;
        }
    </script>
</body>

</html>